<!DOCTYPE html>
<!-- methods、computed、filters的使用 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="utils/vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			<p>{{message}}</p>
			<p>{{reversedMessage}}</p>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					message:"message"
				},
				methods:{
					//这些属性内部都是方法
					// name:function(){
					// }
					
					 // computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
				},
				filters:{
					
				},
				// 计算属性
				computed:{
					// computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
					reversedMessage:function(){
						//this指向当前实例
						return this.message.split('').reverse().join('');
					}
				},
				
			})
		</script>
	</body>
</html>
